<template>
  <div class="fan">
    <div class="fanslb">
      <ul>
        <li v-for="(product, index) in datas" :key="product.favorite_id">
          <div>
            <img :src="product.goods_img" alt="" />
          </div>
          <div>
            <p @click="toProductDetails(product)">{{ product.goods_title }}</p>
            <p>￥{{ product.goods_price }}</p>
          </div>
          <div>
            <img src="../assets/icon_fullfans.png" alt="" @click="delfavor" />
            <p @click="delfavor(product, index)">取消收藏</p>
          </div>
        </li>
      </ul>
      <el-empty
        class="empty"
        description="暂无收藏"
        v-show="fansState"
      ></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  name: "Fans",
  data() {
    return {
      datas: [],
      fansState: true,
      fav_state: "",
      like_state:1
    };
  },
  watch: {
    fav_state: function () {
      this.selectCoo();
    },
  },
  methods: {
    toProductDetails(item) {
      this.$router.push({
        path: "/productdetails",
        query: { id: item.goods_id },
      });
    },
    delfavor(product, index) {
      this.datas.splice(index, 1);
      this.$axios.post("/api/users/delViewCollection", {
        user_id: localStorage.getItem("user_id"),
        favorite_id: product.favorite_id,
        goods_id: product.goods_id,
      }).then((res)=>{
        this.$bus.$emit("shoucang",this.like_state)
      }).then(()=>{
        this.like_state ++
      });
    },
    selectCoo() {
      setTimeout(() => {
        this.$axios
          .get("/api/users/viewCollection", {
            params: {
              user_id: localStorage.getItem("user_id"),
            },
          })
          .then((res) => {
            if (res.data.results == undefined) {
              this.fansState = true;
              this.datas = [];
            } else {
              this.datas = res.data.results;
              this.fansState = false;
            }
          })
          .catch((err) => {
            console.log("err", err);
          });
      }, 300);
    },
  },
  mounted() {
    this.selectCoo();
    this.$bus.$on("passOnState", (res) => {
      this.fav_state = res;
    });
  },
};
</script>

<style >
.empty {
  position: absolute;
  left: 150px;
}
.fan {
  box-shadow: 0 12px 14px 0 rgb(0 0 0 / 20%);
}
.fanslb > ul > li {
    margin-top: 10px;
    display: flex;
    width: 100%;
    height: 120px;
    position: relative;
    right: 60px;
    top: 40px;
}
.fanslb > ul > li div:nth-child(1),
.fanslb > ul > li div:nth-child(2),
.fanslb > ul > li div:nth-child(3) {
  float: left;
}
.fanslb > ul > li div:nth-child(2) > p:nth-child(1),
.fanslb > ul > li div:nth-child(3) p {
  cursor: pointer;
}
.fanslb > ul > li div:nth-child(2) > p:nth-child(2) {
  cursor: default;
}
.fanslb > ul > li div:nth-child(1) {
  width: 30%;
  overflow: hidden;
  margin: 10px auto;
}
.fanslb > ul > li div:nth-child(2) {
  width: 50%;
  margin: 25px auto;
}
.fanslb > ul > li div:nth-child(3) {
  width: 20%;
  margin: 25px auto;
  padding-left: 5%;
}
.fanslb > ul > li div:nth-child(1) img {
  width: 100px;
  height: 100px;
}
.fanslb > ul > li div:nth-child(3) > img {
  width: 25px;
  height: 25px;
  margin-left: 10px;
  cursor: pointer;
}
.fanslb > ul > li div:nth-child(3) p {
  margin-top: 10px;
}
</style>